<template>
  <div class="avue-sidebar-top">
    <el-menu unique-opened
             :default-active="topMenuIndex"
             mode="horizontal"
             :show-timeout="200">
      <template v-for="item in menu">
        <el-menu-item
          :index="item['path']"
          :key="item['path']"
          @click="open(item)"
        >
            <span class="top-menu-title" slot="title"
                  :alt="item['name']">{{generateTitle(item)}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {isURL} from "@/util/validate";
    export default {
        name: "topMenu",
        inject: ["index"],
        data() {
            return {
                allMenuData: {}
            };
        },
        created() {
            this.index.openMenu()
            this.setAllMenuData()
        },
        computed: {
            ...mapGetters(["menu", "menuId"]),
            topMenuIndex: function () {
                let thisPath = this.$router.$avueRouter.getValue(this.$route)
                let result = ''
                for(let i in this.allMenuData) {
                     for(let j in this.allMenuData[i]) {
                         if(thisPath == this.allMenuData[i][j]) {
                             result = i
                         }
                     }
                }
                this.menu.forEach(item=>{
                    if(result == item['path']) {
                        this.$store.commit("SET_THIS_MENU", item['children']);
                    }
                })

                return result
            }
        },
        methods: {
            setAllMenuData() {
                for (let i = 0; i < this.menu.length; i++) {
                    let path = this.menu[i]['path']
                    this.allMenuData[path] = []
                    this.setMenuData(path, this.menu[i])
                }

            },
            setMenuData(key,item) {
                this.allMenuData[key].push(item['path'])
                let childrenList = item['children']
                if(childrenList) {
                    for(let i = 0; i < childrenList.length; i++) {
                        this.setMenuData(key,childrenList[i])
                    }
                }
            },
            generateTitle(item) {
                return this.$router.$avueRouter.generateTitle(
                    item['name'],
                    (item.meta || {}).i18n
                );
            },
            open(item) {
                this.$store.commit("SET_THIS_MENU", item['children']);

                if(!item['children'] || item['children'].length === 0) {

                    this.$router.push({
                        path: this.$router.$avueRouter.getPath({
                            name: item['name'],
                            src: item['path']
                        }, item.meta),
                        query: item.query
                    });
                    return;
                }

                let first = item['children'][0]

                if (this.validIsOpen(first)) {
                    window.open(first['path'])
                } else {
                    this.$router.$avueRouter.group = first.group;
                    this.$router.$avueRouter.meta = first.meta;
                    this.$router.push({
                        path: this.$router.$avueRouter.getPath({
                            name: first['name'],
                            src: first['path']
                        }, first.meta),
                        query: first.query
                    })
                }
            },
            validIsOpen(item) {
                if (item['isOpen'] === 2 && isURL(item['path'])) {
                    return true
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
</style>

